<template>
  <el-form :model="form" @submit.prevent="handleSubmit">
    <div class="search-filters">
      <el-form-item>
        <el-input v-model="form.city" placeholder="目的地、酒店名称">
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      
      <el-form-item>
        <DatePicker v-model:checkIn="form.checkIn" :disabledCheckInDate v-model:checkOut="form.checkOut" :disabledCheckOutDate />
      </el-form-item>
      
      <el-form-item>
        <el-select v-model="form.adults" placeholder="大人">
          <el-option v-for="n in 4" :key="n" :label="`${n} 人`" :value="n" />
        </el-select>
        <el-select v-model="form.children" placeholder="小孩">
          <el-option v-for="n in [0,1,2,3,4]" :key="n" :label="`${n} 人`" :value="n" />
        </el-select>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" native-type="submit">
          搜索酒店
        </el-button>
      </el-form-item>
    </div>
  </el-form>
</template>

<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import DatePicker from '@/views/DatePicker.vue'

const emit = defineEmits(['search'])

const form = ref({
  city: '',
  checkIn: new Date(),
  checkOut: new Date(Date.now() + 24 * 60 * 60 * 1000),
  adults: 1,
  children: 0
})

// 禁用离店日期（必须晚于入住日期）
const disabledCheckOutDate = (time) => {
  if (!searchForm.value.checkIn) return true
  return time.getTime() <= searchForm.value.checkIn.getTime()
}

// 禁用入住日期（只能选择今天及以后的日期）
const disabledCheckInDate = (time) => {
  return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
}
const handleSubmit = () => {
  emit('search', form.value)
}
</script>

<style scoped>
.search-filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 10px;
  align-items: center;
}

@media (max-width: 768px) {
  .search-filters {
    grid-template-columns: 1fr;
  }
}
</style>